<template>
	<view :style="`min-height: ${windowHeight}px;background-color: #F5F6FA;`">
	<!-- 	<up-tabs
		:scrollable="false"
		:list="tabList"
		lineColor="#ff4e4e"
		lineWidth="70"
		:activeStyle="{ color: '#ff4e4e', fontSize: '32rpx', fontWeight: 'bold' }"
		:inactiveStyle="{ fontSize: '32rpx', fontWeight: 'bold', color: '#999999' }"
		>
		</up-tabs> -->
		<view class="avtivity-list">
			<view class="avtivity-item" v-for="(item, index) in dataList" :key="index">
				<up-image :src="item.thumbnail || cover" width="100%" height="320rpx" radius="10" mode="widthFix"></up-image>
				<view class="title">{{item.activityTitle}}</view>
				<view class="time">
					<view>{{item.activityStartTime}}~{{item.activityEndTime}}</view>
				</view>
				<!-- 活动类型 -->
				<!-- <view v-for="(dict, i) in typeList" :key="i">
					<up-tag
					v-if="item.businessType == dict.value"
					:text="dict.label" 
					bgColor="#999" 
					color="#fff" 
					borderColor="transparent"></up-tag>
				</view> -->
				
			</view>
			<up-loadmore :status="status" />
		</view>
	</view>
</template>

<script>
	import {userApi} from '@/api/user/user-api.js'
	import { countTotalPage } from '@/utils/util'
	
	export default {
		data() {
			return {
				windowHeight: 0,
				cover: 'https://axhub.im/ax9/4fb01a9c2a1b02c8/images/%E6%88%91%E7%9A%84%E6%B4%BB%E5%8A%A8/u9.svg',
				tabList: [
					{
						name: '进行中'
					},
					{
						name: '未开始'
					},
					{
						name: '已结束'
					}
				],
				pageRequest:{
					page:1,
					limit:10,
				},
				activitylist: [
					{id: 0, activityTitle: '活动名称', activityBanner: 'https://axhub.im/ax9/4fb01a9c2a1b02c8/images/%E6%88%91%E7%9A%84%E6%B4%BB%E5%8A%A8/u9.svg', activityStartTime: '' },
					{id: 1},
				],
				status: 'loadmore',
				pageRequest:{
					page:1,
					limit:10,
				},
				totalPage: 0,
				status: 'loadmore',
				dataList: [],
				typeList: [
					{label: '场馆预约', value: 0},
					{label: '联谊交友', value: 1},
					{label: '知识竞赛', value: 2},
					{label: '投票活动', value: 3},
					{label: '随手拍', value: 4},
					{label: '问卷调查', value: 5},
					{label: '幸运大转盘', value: 6},
					{label: '健步走', value: 7},
				]
			}
		},
		onLoad() {
			this.getDataList();
			this.getsize()
		},
		onReachBottom() {
			if (this.pageRequest.page < this.totalPage) {
				this.pageRequest.page ++
				this.status = 'loading';
				this.getDataList()
			} else {
				this.status = 'noMore';
			}
		},
		methods: {
			getsize(){
			  let that = this
			  uni.getSystemInfo({
				success(res) {
				  that.windowHeight = res.windowHeight
				},
			  })
			},
			async getDataList(){
				const result = await userApi.userActivityList(this.pageRequest);
				if(result.data.list.length > 0){
					if (this.pageRequest.page === 1) {
						this.dataList = result.data.list
						this.status = 'noMore';
					} else {
						this.dataList = this.dataList.concat(result.data.list);
					}
					this.totalPage = countTotalPage(result.data.total)
			
				}else {
					uni.showToast({
					  title: '没有更多数据了',
					  icon: 'none',
					});
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.avtivity-list {
		padding: 30rpx;
		.avtivity-item {
			background-color: #fff;
			border-radius: 20rpx;
			margin-bottom: 30rpx;
			padding: 30rpx;
			.title {
				font-weight: 700;
				font-size: 18px;
				margin-top: 30rpx;
				margin-bottom: 20rpx;
			}
			.time {
				font-size: 16px;
				color: #828282;
				display: flex;
				margin-bottom: 10rpx;
				.label {
					margin-right: 30rpx;
				}
			}
		}
	}
</style>